<script setup lang='ts' name="sales-order-view">
import type { FormInstance } from 'element-plus'
import type { VxePagerEvents, VxeTableInstance } from 'vxe-table'

import { SearchTable } from '@fl/components'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

import { useRule } from './hooks/use-rule'

const { rules } = useRule()
const router = useRouter()

const tableRef = ref<VxeTableInstance<any>>()
const formRef = ref<any>()

const form = ref({
    date: '',
    name: '',
    user: '',
})

const gridOptions = reactive<any>({
    border: true,
    columns: [
        { field: 'code', title: '产品名称' },
        { field: 'description', title: '产品类目' },
        { field: 'module_name', title: '品牌' },
        { field: 'module_name', title: '型号' },
        { field: 'module_name', title: '规格属性' },
        { field: 'module_name', title: '单位' },
        { field: 'module_name', title: '单价(元)' },
        { field: 'module_name', title: '数量' },
        { field: 'module_name', title: '备注' },
        { field: 'module_name', title: '总价' },
        { field: 'a', title: '累计发货数量' },
        { field: 'b', title: '累计验收数量' },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 350,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 0,
    },
    showOverflow: true,
})

async function getData() {
    // gridOptions.loading = true
    // getPrivileges({
    //     ...form.value,
    //     page: gridOptions.pagerConfig.currentPage,
    //     page_size: gridOptions.pagerConfig.pageSize,
    // }).then((res: any) => {
    //     gridOptions.pagerConfig.total = res.total ?? 0
    //     gridOptions.data = res?.items ?? []
    //     gridOptions.loading = false
    // })
    gridOptions.data = [
        {
            code: '支付',
        },
        {
            code: '接单',
        },
    ]
}
getData()

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    gridOptions.pagerConfig.currentPage = currentPage
    gridOptions.pagerConfig.pageSize = pageSize
    getData()
}

function goToList() {
    router.replace('/purchase-pages/purchase-order-management/purchase-sales-order')
}

async function doSave(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid)
            console.log('error!', fields)
        else
            console.log('error!', fields)
    })
}
</script>

<template>
    <el-card mb-20>
        <div class="info-title">
            订单信息
        </div>

        <el-form :model="form"
                 label-width="auto"
        >
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="项目名称:">
                        项目名称2024 {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="订单名称:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="采购下单人:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="下单人手机号:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="战略协议:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="采购商名称:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="收货地址:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="期望交货日期:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="备注:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <el-card mb-20>
        <div class="info-title">
            产品信息
        </div>

        <el-form :model="form"
                 label-width="auto"
        >
            <el-row :gutter="20">
                <el-col :span="3">
                    <el-form-item label="运输费:">
                        100.00
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item label="安装费:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item label="其他费用:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>

                <el-col :span="3"
                        :offset="12"
                >
                    <el-form-item label="订单总额:">
                        <span style="color: red">6150.00</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="附件信息:">
                        {{ form.user }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <SearchTable v-bind="gridOptions"
                     ref="tableRef"
                     v-model:pager="gridOptions.pagerConfig"
                     :loading="gridOptions.loading"
                     @page-change="handlePageChange"
        />
    </el-card>

    <el-card mb-20>
        <div class="info-title">
            收货信息
        </div>

        <el-form ref="formRef"
                 :inline="true"
                 :model="form"
                 :rules="rules"
                 class="demo-form-inline"
        >
            <el-row>
                <el-col :span="8">
                    <el-form-item label="预计发货时间">
                        <el-date-picker v-model="form.date"
                                        type="date"
                                        placeholder="选择日期"
                                        clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="供应商联络人">
                        <el-input v-model="form.user"
                                  clearable
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="联络人手机号">
                        <el-input v-model="form.user"
                                  clearable
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="备注"
                          label-width="96"
            >
                <el-input v-model="form.user"
                          clearable
                />
            </el-form-item>
        </el-form>
    </el-card>

    <el-card>
        <div style="text-align: center;">
            <ElButton @click="goToList">
                取消
            </ElButton>

            <ElButton type="primary"
                      @click="doSave(formRef)"
            >
                立即接单
            </ElButton>
        </div>
    </el-card>
</template>

<style lang="less" scoped>
.info-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 60px;
}
</style>
